<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Alba Lite - Free Bootstrap Admin Template">
  <meta name="author" content="Łukasz Holeczek">
  <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,AngularJS,Angular,Angular2,Angular 2,Angular4,Angular 4,jQuery,CSS,HTML,RWD,Dashboard,React,React.js,Vue,Vue.js">
  <link rel="shortcut icon" href="img/favicon.png">
  <title>信息管理系统界面</title>

  <!-- Icons -->
  <link href="css/font-awesome.min.css" rel="stylesheet">
  <link href="css/simple-line-icons.min.css" rel="stylesheet">

  <!-- Main styles for this application -->
  <link href="css/main.css" rel="stylesheet">
  <link href="plugin/pace/pace-theme-minimal.css" rel="stylesheet">
  <link href="plugin/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet">
  <link href="plugin/mloading/jquery.mloading.css" rel="stylesheet">
  <!-- Styles required by this views -->

</head>

<body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden"  >
  <div id="app">
  <header class="app-header navbar">
    <button class="navbar-toggler mobile-sidebar-toggler d-lg-none mr-auto" @click="sidebarMobileToggle()" type="button">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#"></a>
    <button class="navbar-toggler sidebar-toggler d-md-down-none" @click="sidebarHideToggle()" type="button">
      <span class="navbar-toggler-icon"></span>
    </button>

    <ul class="nav navbar-nav d-md-down-none">
      <li v-for="(module,index) in resource" class="nav-item nav-model  px-3" :class="{ active: module.id === moduleId }"   >
        <a class="nav-link" href="#" @click="choiceModule(module)" v-text="module.title"></a>
      </li>

      
    </ul>
    <ul class="nav navbar-nav ml-auto">
      <li class="nav-item nav-model d-md-down-none">
        <a class="nav-link" href="#"><i class="icon-bell"></i><span class="badge badge-pill badge-danger">5</span></a>
      </li>
      <li class="nav-item nav-model d-md-down-none">
        <a class="nav-link" href="#"><i class="icon-list"></i></a>
      </li>
      <li class="nav-item nav-model d-md-down-none">
        <a class="nav-link" href="#"><i class="icon-location-pin"></i></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          <img src="img/avatars/6.jpg" class="img-avatar">
        </a>
        <div class="dropdown-menu dropdown-menu-right">
          <div class="dropdown-header text-center">
            <strong>Account</strong>
          </div>
          <a class="dropdown-item" href="#"><i class="fa fa-bell-o"></i> Updates<span class="badge badge-info">42</span></a>
          <a class="dropdown-item" href="#"><i class="fa fa-envelope-o"></i> Messages<span class="badge badge-success">42</span></a>
          <a class="dropdown-item" href="#"><i class="fa fa-tasks"></i> Tasks<span class="badge badge-danger">42</span></a>
          <a class="dropdown-item" href="#"><i class="fa fa-comments"></i> Comments<span class="badge badge-warning">42</span></a>
          <div class="dropdown-header text-center">
            <strong>Settings</strong>
          </div>
          <a class="dropdown-item" href="#"><i class="fa fa-user"></i> Profile</a>
          <a class="dropdown-item" href="#"><i class="fa fa-wrench"></i> Settings</a>
          <a class="dropdown-item" href="#"><i class="fa fa-usd"></i> Payments<span class="badge badge-secondary">42</span></a>
          <a class="dropdown-item" href="#"><i class="fa fa-file"></i> Projects<span class="badge badge-primary">42</span></a>
          <div class="divider"></div>
          <a class="dropdown-item" href="#"><i class="fa fa-shield"></i> Lock Account</a>
          <a class="dropdown-item" href="#"><i class="fa fa-lock"></i> Logout</a>
        </div>
      </li>
    </ul>

  </header>

  <div class="app-body">
    <div class="sidebar">
      <nav class="sidebar-nav">

        <ul class="nav"   v-for="(module,indexmo) in resource" v-show="module.id === moduleId" >
          <template v-for="(menu,indexme) in module.children" >
            <template v-if="menu.title=='主页'">
                <li class="nav-title"  >
                  主页
                </li>
                <li class="nav-item" :class="{active:activeId == menu.id}">
                  <a class="nav-link"  :data-href="menu.href"   @click="viewMenu(menu,module.id)"><i :class="menu.icon"></i> {{ menu.title }} <span class="badge badge-primary">NEW</span></a>
                </li>
            </template>
          </template>
          <li class="nav-title">
            菜单
          </li>
          <template v-for="(menu,indexme) in module.children" >
            <template v-if="menu.title!='主页'">
                   <li class="nav-item" v-if="menu.type==1" :class="{active:activeId == menu.id}">
                    <a class="nav-link"  :data-href="menu.href"   @click="viewMenu(menu,module.id)" ><i :class="menu.icon"></i> {{ menu.title }}</a>
                   </li>
                   <li class="nav-item nav-dropdown" :class="{open:menu.open,active:topActiveId == menu.id}"   v-else>
                    <a class="nav-link nav-dropdown-toggle" @click="topExpansion(menu,module.id)"><i :class="menu.icon"></i>  {{ menu.title }}</a>
                    <ul class="nav-dropdown-items">
                          <template v-for="(menuc,indexc) in menu.children" >
                                <li class="nav-item" v-if="menuc.type==1" :class="{active:activeId == menuc.id}">
                                <a class="nav-link"  :data-href="menuc.href"   @click="viewMenu(menuc,module.id,menu)" ><i :class="menuc.icon"></i> {{ menuc.title }}</a>
                                </li>
                              <li class="nav-item nav-dropdown" :class="{open:menuc.open}" v-else>
                                <a class="nav-link nav-dropdown-toggle" @click="expansion(menuc)"><i :class="menuc.icon"></i> {{ menuc.title }}</a>
                                <ul class="nav-dropdown-items">
                                  <template v-for="(menucc,indexcc) in menuc.children" >
                                        <li class="nav-item" v-if="menucc.type==1" :class="{active:activeId == menucc.id}">
                                        <a class="nav-link"  :data-href="menucc.href"   @click="viewMenu(menucc,module.id,menu,menuc)"><i :class="menucc.icon"></i> {{ menucc.title }}</a>
                                        </li>
                                  </template>
                              </ul>
                              </li>
                          </template>
                    </ul>
                  </li>
            </template>
          </template>
        </ul>
      </nav>
      <button class="sidebar-minimizer brand-minimizer" @click="sidebarMinimizedToggle()" type="button"></button>
    </div>

    <!-- Main content -->
    <main class="main">

      <!-- Breadcrumb -->
      <ol class="breadcrumb" v-html="breadcrumb">
        <li class="breadcrumb-item">工作台</li>
        <li class="breadcrumb-item active">主页</li>
      </ol>

      <div class="container-fluid">

        <div class="animated fadeIn">
          <iframe :src="activeUrl" name="mainFrame" id="mainFrame"    style="border: none;width: 100%;min-width: 100%;"></iframe>
          <!--/.row-->
        </div>

      </div>
      <!-- /.conainer-fluid -->
    </main>



  </div>
  </div>
    <footer class="app-footer">
    <span><a href="https://genesisui.com/bootstrap-admin-template.html?id=alba">Alba Lite</a> © 2017 creativeLabs.</span>
    <span class="ml-auto">Powered by <a href="https://genesisui.com/bootstrap-admin-template.html?id=alba">GenesisUI
        Lite</a></span>
  </footer>
  <script type="text/javascript" data-main="js/lib/index.js" src="js/requirejs/require.js"></script>
  
</body>

</html>